GET and POST are two of the most commonly used HTTP methods in Flutter applications. A GET request is generally used to retrieve data from a server, while a POST request is generally used to send data to a server to create a new resource or submit information.
Flutter provides the http package as a simple way to communicate with REST APIs and web services. The official Flutter networking documentation demonstrates using http.get() for fetching data and http.post() for sending data. :contentReference[oaicite:0]{index=0}
HTTP methods describe the action that a client wants to perform on a server.
| Method | Main Purpose | Example |
|---|---|---|
| GET | Retrieve existing data | Get a list of products |
| POST | Send or create new data | Create a new user |
A GET request is used when the Flutter application needs to retrieve information from an API server.
A POST request is commonly used to send information to a server. For example, a Flutter application can send registration information to a backend server to create a new account.
Before sending GET or POST requests, add the http package to the Flutter project.
flutter pub add httpThen import the package:
import 'package:http/http.dart' as http;Flutter's networking cookbook uses the http package for both fetching and sending data. :contentReference[oaicite:1]{index=1}
Android applications that access the internet should declare the Internet permission in the Android manifest.
The http.get() method sends a GET request and returns a Future.
import 'package:http/http.dart' as http;
Future fetchAlbum() {
return http.get(
Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
);
}
Because network communication is asynchronous, the result is returned through a Future. :contentReference[oaicite:2]{index=2}
In practical Flutter applications, async and await make asynchronous HTTP code easier to read.
Future fetchData() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
);
print(response.statusCode);
print(response.body);
}
async marks the function as asynchronous.await waits for the HTTP request to complete.http.get() sends the GET request.response.statusCode contains the HTTP status code.response.body contains the response data.
Always check the HTTP status code before processing the response as successful.
Future fetchAlbum() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
);
if (response.statusCode == 200) {
print('Request successful');
print(response.body);
} else {
print('Request failed');
}
}
| Status Code | Meaning |
|---|---|
| 200 | Request successful |
| 400 | Bad request |
| 401 | Authentication required or failed |
| 403 | Access forbidden |
| 404 | Resource not found |
| 500 | Server error |
| 503 | Service unavailable |
Most REST APIs return JSON. Dart's dart:convert library provides jsonDecode() for converting JSON text into Dart data.
import 'dart:convert';
import 'package:http/http.dart' as http;
Future fetchAlbum() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
);
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
print(data['id']);
print(data['title']);
}
}
Using a model class makes API data easier to manage and provides stronger type safety.
class Album {
final int userId;
final int id;
final String title;
const Album({
required this.userId,
required this.id,
required this.title,
});
factory Album.fromJson(Map json) {
return Album(
userId: json['userId'] as int,
id: json['id'] as int,
title: json['title'] as String,
);
}
}
import 'dart:convert';
import 'package:http/http.dart' as http;
Future fetchAlbum() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
headers: {
'Accept': 'application/json',
},
);
if (response.statusCode == 200) {
final data = jsonDecode(response.body)
as Map;
return Album.fromJson(data);
}
throw Exception('Failed to load album');
}
Flutter's official recipe follows this general pattern: make the GET request, check for a successful response, decode the JSON body, and convert it into a Dart object. :contentReference[oaicite:3]{index=3}
Headers provide additional information to the server. For example, the Accept header can indicate that the client expects JSON.
final response = await http.get(
Uri.parse('https://example.com/api/products'),
headers: {
'Accept': 'application/json',
},
);
Protected APIs may require authentication information in request headers. A common approach is an Authorization header containing an access token.
final response = await http.get(
Uri.parse('https://example.com/api/profile'),
headers: {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
'Accept': 'application/json',
},
);The exact authentication format depends on the API. Flutter's documentation demonstrates adding authorization information through request headers. :contentReference[oaicite:4]{index=4}
Query parameters allow an application to send additional filtering or search information in the URL.
final uri = Uri.https(
'example.com',
'/api/products',
{
'category': 'mobile',
'page': '1',
'limit': '20',
},
);
final response = await http.get(uri);
https://example.com/api/products?category=mobile&page=1&limit=20
Path parameters are commonly used when requesting a specific resource.
final userId = 10;
final response = await http.get(
Uri.parse('https://example.com/api/users/$userId'),
);
An API may return an array of objects rather than a single object.
Future> fetchAlbums() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/albums'),
);
if (response.statusCode != 200) {
throw Exception('Failed to load albums');
}
final List data = jsonDecode(response.body);
return data
.map((item) => Album.fromJson(
item as Map,
))
.toList();
}
FutureBuilder>(
future: fetchAlbums(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.hasError) {
return Center(
child: Text('Error: ${snapshot.error}'),
);
}
final albums = snapshot.data ?? [];
if (albums.isEmpty) {
return const Center(
child: Text('No albums found'),
);
}
return ListView.builder(
itemCount: albums.length,
itemBuilder: (context, index) {
final album = albums[index];
return ListTile(
title: Text(album.title),
subtitle: Text('ID: ${album.id}'),
);
},
);
},
)
An API request should generally not be created directly inside the build() method. Flutter can call build() many times, which could result in repeated network requests.
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: fetchAlbum(),
builder: (context, snapshot) {
return const SizedBox();
},
);
}
late Future futureAlbum;
@override
void initState() {
super.initState();
futureAlbum = fetchAlbum();
}
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: futureAlbum,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data!.title);
}
if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return const CircularProgressIndicator();
},
);
}
Flutter's official fetch-data recipe recommends initiating the request from initState() or didChangeDependencies() rather than directly from build(). :contentReference[oaicite:5]{index=5}
A POST request sends data from the Flutter application to a server. The server can use that data to create a new resource or perform an operation.
Flutter Form
|
| POST
v
Backend API
|
| Save Data
v
Database
The http.post() method can send data to a server.
import 'dart:convert';
import 'package:http/http.dart' as http;
Future createAlbum(String title) {
return http.post(
Uri.parse('https://jsonplaceholder.typicode.com/albums'),
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode({
'title': title,
}),
);
}
Flutter's official networking recipe uses http.post(), a JSON-encoded body, and a Content-Type: application/json header for sending JSON data. :contentReference[oaicite:6]{index=6}
Future createAlbum() async {
final response = await http.post(
Uri.parse('https://jsonplaceholder.typicode.com/albums'),
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode({
'title': 'Flutter Course',
}),
);
print(response.statusCode);
print(response.body);
}
http.post() sends the request.Uri.parse() creates the request URL.headers provides request metadata.Content-Type tells the server that the body contains JSON.jsonEncode() converts Dart data into a JSON string.body contains the data being sent.Future contains the server response.
Future registerUser() async {
final userData = {
'name': 'Rahul',
'email': '[email protected]',
'password': 'examplePassword',
'phone': '9876543210',
};
final response = await http.post(
Uri.parse('https://example.com/api/register'),
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: jsonEncode(userData),
);
if (response.statusCode == 201) {
print('User registered successfully');
} else {
print('Registration failed');
}
}
Many APIs return information about the resource created by the POST request. The response can be decoded using jsonDecode().
Future createPost() async {
final response = await http.post(
Uri.parse('https://jsonplaceholder.typicode.com/posts'),
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode({
'title': 'Flutter',
'body': 'Learning POST requests',
'userId': 1,
}),
);
if (response.statusCode == 201) {
final data = jsonDecode(response.body);
print('Created ID: ${data['id']}');
print('Title: ${data['title']}');
} else {
print('Failed to create post');
}
}
A successful resource-creation request commonly returns HTTP status 201 Created. The exact status code depends on the API design.
if (response.statusCode == 201) {
print('Resource created successfully');
} else {
print('Failed to create resource');
}Flutter's official POST example checks for a 201 response before converting the response body into its model object. :contentReference[oaicite:7]{index=7}
class Album {
final int id;
final String title;
const Album({
required this.id,
required this.title,
});
factory Album.fromJson(Map json) {
return Album(
id: json['id'] as int,
title: json['title'] as String,
);
}
}
Future createAlbum(String title) async {
final response = await http.post(
Uri.parse('https://jsonplaceholder.typicode.com/albums'),
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode({
'title': title,
}),
);
if (response.statusCode == 201) {
return Album.fromJson(
jsonDecode(response.body) as Map,
);
}
throw Exception('Failed to create album');
}
POST requests are frequently used with Flutter forms. A TextEditingController can read user input and the value can then be sent to the API.
final TextEditingController titleController =
TextEditingController();
Future submitTitle() async {
final title = titleController.text.trim();
if (title.isEmpty) {
return;
}
final response = await http.post(
Uri.parse('https://example.com/api/albums'),
headers: {
'Content-Type': 'application/json',
},
body: jsonEncode({
'title': title,
}),
);
if (response.statusCode == 201) {
print('Data submitted');
}
}
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class Album {
final int id;
final String title;
const Album({
required this.id,
required this.title,
});
factory Album.fromJson(Map json) {
return Album(
id: json['id'] as int,
title: json['title'] as String,
);
}
}
Future fetchAlbum() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
headers: {
'Accept': 'application/json',
},
);
if (response.statusCode == 200) {
return Album.fromJson(
jsonDecode(response.body) as Map,
);
}
throw Exception('Failed to load album');
}
class AlbumScreen extends StatefulWidget {
const AlbumScreen({super.key});
@override
State createState() => _AlbumScreenState();
}
class _AlbumScreenState extends State {
late Future albumFuture;
@override
void initState() {
super.initState();
albumFuture = fetchAlbum();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GET Request'),
),
body: FutureBuilder(
future: albumFuture,
builder: (context, snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.hasError) {
return Center(
child: Text('Error: ${snapshot.error}'),
);
}
if (!snapshot.hasData) {
return const Center(
child: Text('No data available'),
);
}
return Center(
child: Text(
snapshot.data!.title,
style: const TextStyle(fontSize: 24),
),
);
},
),
);
}
}
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class Album {
final int id;
final String title;
const Album({
required this.id,
required this.title,
});
factory Album.fromJson(Map json) {
return Album(
id: json['id'] as int,
title: json['title'] as String,
);
}
}
Future createAlbum(String title) async {
final response = await http.post(
Uri.parse('https://jsonplaceholder.typicode.com/albums'),
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode({
'title': title,
}),
);
if (response.statusCode == 201) {
return Album.fromJson(
jsonDecode(response.body) as Map,
);
}
throw Exception('Failed to create album');
}
class CreateAlbumScreen extends StatefulWidget {
const CreateAlbumScreen({super.key});
@override
State createState() =>
_CreateAlbumScreenState();
}
class _CreateAlbumScreenState extends State {
final TextEditingController titleController =
TextEditingController();
Future? albumFuture;
@override
void dispose() {
titleController.dispose();
super.dispose();
}
void submit() {
final title = titleController.text.trim();
if (title.isEmpty) {
return;
}
setState(() {
albumFuture = createAlbum(title);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('POST Request'),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
TextField(
controller: titleController,
decoration: const InputDecoration(
labelText: 'Album Title',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: submit,
child: const Text('Create Album'),
),
const SizedBox(height: 24),
if (albumFuture != null)
FutureBuilder(
future: albumFuture,
builder: (context, snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return const CircularProgressIndicator();
}
if (snapshot.hasError) {
return Text(
'Error: ${snapshot.error}',
);
}
if (snapshot.hasData) {
return Text(
'Created: ${snapshot.data!.title}',
);
}
return const SizedBox();
},
),
],
),
),
);
}
}
| Feature | GET | POST |
|---|---|---|
| Purpose | Retrieve data | Send/create data |
| Typical data location | URL/query parameters | Request body |
| Common use | Fetching products | Creating users |
| JSON body | Usually not used for basic GET APIs | Commonly used |
| Common success code | 200 | 201 for resource creation |
| Flutter method | http.get() |
http.post() |
Future fetchAlbum() async {
try {
final response = await http
.get(
Uri.parse(
'https://jsonplaceholder.typicode.com/albums/1',
),
)
.timeout(const Duration(seconds: 10));
if (response.statusCode == 200) {
return Album.fromJson(
jsonDecode(response.body)
as Map,
);
}
if (response.statusCode == 404) {
throw Exception('Album not found');
}
if (response.statusCode >= 500) {
throw Exception('Server error');
}
throw Exception(
'GET request failed: ${response.statusCode}',
);
} catch (e) {
throw Exception('Unable to fetch album: $e');
}
}
Future createAlbum(String title) async {
try {
final response = await http
.post(
Uri.parse(
'https://example.com/api/albums',
),
headers: {
'Content-Type': 'application/json',
},
body: jsonEncode({
'title': title,
}),
)
.timeout(const Duration(seconds: 10));
if (response.statusCode == 201) {
return Album.fromJson(
jsonDecode(response.body)
as Map,
);
}
if (response.statusCode == 400) {
throw Exception('Invalid album data');
}
if (response.statusCode == 401) {
throw Exception('Authentication required');
}
throw Exception(
'POST request failed: ${response.statusCode}',
);
} catch (e) {
throw Exception('Unable to create album: $e');
}
}
GET and POST screens should provide appropriate feedback to the user while network operations are running.
| State | Example |
|---|---|
| Loading | Show progress indicator or disabled submit button |
| Success | Display returned data or success message |
| Empty | Show a message when a GET request returns no items |
| Error | Show a useful error message and retry option |
Users may accidentally press a submit button multiple times. Disable the button while the request is running.
bool isSubmitting = false;
Future submit() async {
if (isSubmitting) {
return;
}
setState(() {
isSubmitting = true;
});
try {
await createAlbum('Flutter Album');
} finally {
if (mounted) {
setState(() {
isSubmitting = false;
});
}
}
}
final formKey = GlobalKey();
Form(
key: formKey,
child: Column(
children: [
TextFormField(
controller: titleController,
validator: (value) {
if (value == null || value.trim().isEmpty) {
return 'Please enter a title';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (formKey.currentState!.validate()) {
submit();
}
},
child: const Text('Submit'),
),
],
),
)
For larger applications, networking code can be separated from the widgets.
import 'dart:convert';
import 'package:http/http.dart' as http;
class ApiService {
static const String baseUrl =
'https://example.com/api';
Future> getAlbums() async {
final response = await http.get(
Uri.parse('$baseUrl/albums'),
headers: {
'Accept': 'application/json',
},
);
if (response.statusCode != 200) {
throw Exception('Failed to fetch albums');
}
final List data =
jsonDecode(response.body);
return data
.map(
(item) => Album.fromJson(
item as Map,
),
)
.toList();
}
Future createAlbum(String title) async {
final response = await http.post(
Uri.parse('$baseUrl/albums'),
headers: {
'Content-Type': 'application/json',
},
body: jsonEncode({
'title': title,
}),
);
if (response.statusCode != 201) {
throw Exception('Failed to create album');
}
return Album.fromJson(
jsonDecode(response.body)
as Map,
);
}
}
Flutter UI
|
v
ViewModel / Controller
|
v
Repository / Service
|
v
http.get() / http.post()
|
v
REST API
|
v
Database
User opens screen
↓
Flutter sends GET request
↓
Server receives request
↓
Server retrieves data
↓
Server returns JSON
↓
Flutter checks status code
↓
Flutter decodes JSON
↓
Model object created
↓
UI displays data
User enters data
↓
Flutter validates input
↓
Flutter encodes data as JSON
↓
Flutter sends POST request
↓
Server validates data
↓
Server creates resource
↓
Server returns response
↓
Flutter checks status code
↓
Flutter decodes response
↓
UI displays success/error state
http package.await correctly.jsonEncode() when sending JSON.Content-Type header when the API expects JSON.build().
http.get() when retrieving data.http.post() when sending or creating data.async and await for asynchronous operations.jsonDecode() for reading JSON responses.jsonEncode() for sending JSON request bodies.Content-Type header when required.http.Client when dependency injection and testing are useful.
Network-dependent code should be designed so that the HTTP client can be replaced with a test or mock implementation when necessary.
Future fetchAlbum(http.Client client) {
return client.get(
Uri.parse(
'https://jsonplaceholder.typicode.com/albums/1',
),
);
}Passing an http.Client into the function makes the networking code easier to test. Flutter's background-parsing recipe uses this approach. :contentReference[oaicite:8]{index=8}
Create a Flutter application that demonstrates both GET and POST requests.
ListView.builder.
http package?http.get() return a Future?async and await used with HTTP requests?jsonEncode()?Content-Type header important for JSON POST requests?build()?
| Concept | Important Point |
|---|---|
| GET | Used to retrieve data |
| POST | Used to send/create data |
http.get() |
Sends a GET request |
http.post() |
Sends a POST request |
Future |
Represents an asynchronous result |
jsonDecode() |
Converts JSON text to Dart data |
jsonEncode() |
Converts Dart data to JSON text |
statusCode |
Indicates the result of the request |
Content-Type |
Describes the request body format |
Authorization |
Can carry authentication credentials or tokens |
FutureBuilder |
Builds UI from asynchronous state |
| Model Class | Represents structured API data |
For structured Flutter development training, visit the JustAcademy Flutter Training Course.
To register for a Flutter course demonstration, visit the JustAcademy Flutter Course Demo Registration page.
GET and POST requests are fundamental for building Flutter applications that communicate with backend APIs. GET requests are primarily used to retrieve information, while POST requests are commonly used to submit or create information. Using the http package together with async, await, JSON encoding and decoding, model classes, status-code validation, error handling, and proper UI states allows developers to build reliable API-based Flutter applications.
The basic flow can be remembered as:
GET:
Flutter UI → http.get() → API → JSON Response → Model → UI
POST:
Flutter Form → Validate → jsonEncode() → http.post() → API → Response → UI
